<template>
	<view>
		<checkbox-group v-model="checkboxValue" @change="checkboxChange">
			<view class="scolling-page" v-for="(item,index) in productData" :key="index">
				<checkbox v-if="isShowCheckbox" :value="item.id.toString()" :checked="item.checked"
					style="margin: 20rpx;" />
				<view class="card">
					<view class="product_demo" style="align-items: center;">
						<u--image :radius="5" :showLoading="true" :src="item.image" width="80px"
							height="80px"></u--image>
						<view class="header_name" style="margin-left: 20rpx;"><span
								v-if="item.brandName">[{{item.brandName}}]</span>{{item.name}}<span style="margin-left: 20rpx;">{{item.sku}}</span></view>
					</view>
					<view class="content" style="display: flex;font-size: 33rpx;margin: 20rpx 0;color: #000;">
						<view style="flex: 3;">
							{{item.operateCityName}}
						</view>
						<view style="flex: 3;">
							￥{{item.price}}
						</view>
						<view class="main_color" style="align-items: flex-end;">
							删除商品
						</view>
					</view>
					<view class="content" style="display: flex;font-size: 33rpx;margin: 30rpx 0;color: #000;">
						<view style="flex: 2;">
							商品分类
						</view>
						<view style="flex: 3;">
							{{item.categoryName}}
						</view>
					</view>
					<view class="card-bg"
						style="border-radius: 20rpx;background-color: #fafafa;padding: 20rpx;color: #636363;">
						<view class="content"
							style="display: flex;font-size: 30rpx;margin: 40rpx 0;align-items: center;">
							<view style="flex: 2;">
								活动价格
							</view>
							<view style="flex: 3;display: flex;align-items: center;">
								<view style="flex: 1;line-height: 60rpx;">
									<input type="number" step="0.01" v-model.trim="item.activityPrice" :min="0"
										style="border: 2rpx solid #e3e3e3;background-color: #fefefe;width: 180rpx;height: 60rpx; border-radius: 10rpx;padding-left: 56rpx;position: absolute;"
										@blur="blur(item,index)" />
									<span style="position: relative;top: 50%;left: 20rpx;color: #999;">￥</span>
								</view>
								<!-- <view v-if="showNewTop" style="flex: 1;color: #fe5c2d;font-size: 28rpx;line-height: 1.2;">
								录入价格不符合报名要求，请重新录入
							</view> -->
							</view>
						</view>
						<view v-if="item.showNewTop" style="display: flex;margin-top: -20rpx;font-size: 28rpx;">
							<view style="flex: 2;">
								&nbsp
							</view>
							<view style="flex: 3;">
								<text
									style="background-color: #fcf0f0;padding: 6rpx;color: #e76444;">最高可设置￥{{(item.price * 0.97).toFixed(2)}}</text>
							</view>
						</view>
						
						<view class="content"
							style="display: flex;font-size: 30rpx;margin: 40rpx 0;align-items: center;">
							<view style="flex: 2;">
								活动限量
							</view>
							<view style="flex: 3;display: flex;align-items: center;">
								<view style="flex: 1;line-height: 60rpx;">
									<input type="number" step="0.01" v-model.trim="item.quota" :min="0"
										style="border: 2rpx solid #e3e3e3;background-color: #fefefe;width: 180rpx;height: 60rpx; border-radius: 10rpx;padding-left: 56rpx;position: absolute;"
										@blur="blur(item,index)" />
									<span style="position: relative;top: 50%;left: 20rpx;color: #999;">￥</span>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</checkbox-group>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from '@/utils/setTheme.js';
	let app = getApp();
	export default {
		props: {
			activeDateTime: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: 'blue'
			},
			isShowCheckbox: {
				type: Boolean,
				default: false,
			},
			productData: {
				type: [Array],
				default: ''
			}
		},
		data() {
			return {
				theme: app.globalData.theme,
				// ----------------------
				totalInventory: null, //尝鲜促销价
				activityPrice: null,
				// showNewTop: false,
				// ------促销总库存模式--------
				skuArr2: [{
					name: "不限",
					type: '-1'
				}, {
					name: "自定义",
					type: '2'
				}],
				// totalInventoryModel: '1', //促销总库存
				// totalInventoryNum: 1, //促销总库存初始值1
				// showTotalInventory: false,
				// //-------------------------------------
				// daylimitModel: '1', //单日限购状态
				// showDayLimitModel: false,
				// customerDailyLimit: 1, //单日限购初始值1
				// //-------------------------------------
				// totalRestriction: '1', //单客户总限购
				// showtotalRestriction: false,
				// customerTotalLimit: 1, //单客户总限购初始值1
				//----------
				checkboxValue: [], // 选择的批量设置商品
			}
		},

		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		watch: {
			checkboxValue(newVal, oldVal) {
				if (this.productData.length == this.checkboxValue.length) {
					this.$emit('isAllChecked', true);
				} else {
					this.$emit('isAllChecked', false);
				}
			},
		},
		methods: {
			// ----------状态选择-sign:1总库存，2单日限购，3总限购----------
			tapAttr2(ele, sign, i) {
				switch (sign) {
					case '1': //促销总库存
						this.$set(this.productData[i], 'totalInventoryModel', ele.type) //1不限，2自定义
						this.$set(this.productData[i], 'promotionInventory', 1);

						if (ele.type == '2') {
							this.$set(this.productData[i], 'showTotalInventory', true)
						} else {
							this.$set(this.productData[i], 'showTotalInventory', false)
						}
						break;
					case '2': //单客户单日限购
						this.$set(this.productData[i], 'daylimitModel', ele.type) //1不限，2自定义
						this.$set(this.productData[i], 'customerDailyLimit', 1); //初始值
						if (ele.type == '2') {
							this.$set(this.productData[i], 'showDayLimitModel', true)
						} else {
							this.$set(this.productData[i], 'showDayLimitModel', false)
						}
						break;
					case '3': //单客户总限购
						this.$set(this.productData[i], 'totalRestriction', ele.type) //1不限，2自定义
						this.$set(this.productData[i], 'customerTotalLimit', 1); //初始值
						if (ele.type == '2') {
							this.$set(this.productData[i], 'showtotalRestriction', true)
						} else {
							this.$set(this.productData[i], 'showtotalRestriction', false)
						}
						break;
				}
			},
			//输入框失去焦点
			blur(res, i) {
				let numValue = (res.price * 0.97).toFixed(2);
				console.log('numValue:',numValue>parseFloat(res.activityPrice))
				if (parseFloat(res.activityPrice) > numValue) {
					this.productData[i].activityPrice = '';
					this.$set(this.productData[i], 'showNewTop', true)
				} else {
					this.$set(this.productData[i], 'showNewTop', false)
					this.$emit('update-item', this.productData[i], i);
				}
			},

			// ----促销总库存----
			blur2(res) {
				if (res.value == "") {
					this.promotionInventory = 1;
				}
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},

			//--------单客户单日限购-----
			blur3(res) {
				if (res.value == "") {
					this.customerDailyLimit = 1;
				}
			},
			/** 
			单客户总限购
			 */
			blur4(res) {
				if (res.value == "") {
					this.dayLimitNum = 1;
				}
			},
			// 提交报名
			submitRegist() {
				this.$emit('submitRegist', this.productData)
			},

			// --
			checkboxChange(ele) {
				console.log(ele, 'ele')
				if (ele && ele.detail && ele.detail.value && ele.detail.value.length) {
					let checkboxValue1 = []
					for (var i = 0; i < ele.detail.value.length; i++) {
						checkboxValue1.push(Number(ele.detail.value[i]))
					}
					this.$set(this, 'checkboxValue', checkboxValue1)
					this.$emit('checkboxChange', checkboxValue1);
				} else {
					this.$emit('checkboxChange', ele);
				}

				//同步选择结果到父组件
				// let checkboxValue = ele;
				// this.$emit('checkboxChange', checkboxValue);
			},
			// -- 父组件调用，全选或清除所有选项
			checkboxAllSelect(isClean) {
				let that = this;
				console.log('trueadadasd', isClean)
				if (isClean) {
					this.checkboxValue = [];
					console.log('多选调用事件，，，，')
					for (let item of that.productData) {
						item.checked = false;
					}
				} else {
					// for (let text of this.productData) {
					// 	this.checkboxValue.push(text.id);
					// }
					for (let item of that.productData) {
						item.checked = true;
					}
				}
				this.checkboxChange(this.checkboxValue);
			},
			// 批量设置库存，更新事件
			updateProduct(newProductDate) {
				this.$set(this, 'productData', newProductDate)
				// this.productData = newProductDate;
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.scolling-page {
		display: flex;
		align-items: center;
	}

	.card {
		margin: 20rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
	}

	.product_demo {
		display: flex;
	}

	.header_name {
		font-size: 31rpx;
		font-weight: bolder;
	}

	// .border-item {
	// 	border-bottom: 1px solid #f3f3f3;
	// }

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 820rpx;

		.scroll-view {
			height: 100%;
		}
	}

	.sku-select1 {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #fff;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 0 24rpx;
			font-size: 28rpx;
			border-radius: 12rpx;
			border: 2rpx solid #dddddd;
		}

		.right-class-active {
			@include main_color(theme);
			// @include main_bg_rgba_color(theme, 0.05);
			border: 2rpx solid;
		}
	}
</style>